<!DOCTYPE html>
<html>

<head>
    <title>test</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <style>
        .red{
            background: red;
        }
    </style>
</head>

<body>
    <div id="root"></div>
    <video id="sound" width="660" height="364" controls="controls" poster="./12.jpeg"></video>
    <script>

      function oneStep(){
        let xhr = new XMLHttpRequest()
        xhr.open('GET', 'http://localhost:3001/video', true)
        xhr.responseType = 'blob'
        xhr.onload = function(e) {
          if (this.status === 200) {
            // 获取blob对象
            let blob = this.response
            console.log(blob)
            // 获取blob对象地址，并把值赋给容器
            $("#sound").attr("src", URL.createObjectURL(blob));
          }
        }
        xhr.send()
      }

      function twoStep(){
        var mediaSource = new MediaSource();
        var video = document.getElementById('sound');
        video.src = URL.createObjectURL(mediaSource);
        mediaSource.addEventListener('sourceopen', sourceOpen);

        function sourceOpen() {
          var mime = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
          var sourceBuffer = mediaSource.addSourceBuffer(mime);
          fetchBuffer('/video', function(buffer){
            sourceBuffer.addEventListener('updateend', function (_) {
              mediaSource.endOfStream();
              video.play();
            });
            sourceBuffer.appendBuffer(buffer);
          });
        }

        // 以二进制格式请求某个url
        function fetchBuffer(url, callback) {
          var xhr = new XMLHttpRequest;
          xhr.open('get', url);
          xhr.responseType = 'arraybuffer';
          xhr.onload = function () {
            let res=xhr.response;
            callback(res);
          };
          xhr.send();
        }
      }


    </script>
    <script src="./shipin.js"></script>


</body>

</html>